<template>
  <HeaderNav />
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <!-- 定义右侧窗口信息 -->
      <section class="aside">
        <!-- 面板 -->
        <UserAside />
        <Advice :data="advice" />
        <ResourceNominate :keyword="resourceDetail.resourceName"/>
      </section>
      <section style="min-height: 1230px">
        <!-- 定义详细目录-->
        <div id="detail">
          <!-- 资源上传者信息 -->
          <div class="res-author">
            <img v-if="resourceDetail.uploader" :src="$api.preview(resourceDetail.uploader.avatar)"/>
            <span>{{ nickName }}</span><br/>
            <div class="gz" v-if="$store.getters.currentUser == null || $store.getters.currentUser.id != resourceDetail.userId" >
              <a href="javascript:void(0)" @click="attentionUser(resourceDetail.userId)" v-if="!resourceDetail.attention">关注</a>
              <a href="javascript:void(0)" v-else>已关注</a>
              <a href="javascript:void(0)" @click.prevent="sendLetter(resourceDetail.userId)">私信</a>
            </div>
            <a :href="'/more/' + resourceDetail.userId">查看TA的更多资源</a>
          </div>

          <!-- collect 样式 会显示 收藏印章(如果该资源没有被收藏，不显示) -->
          <div class="res-detail" :class="{collect: resourceDetail.collect}">
            <!-- 资源信息 -->
            <div class="title">
              <h1>{{ resourceDetail.resourceName }}<a href="javascript:void(0)"></a></h1>
              <b class="time">{{ resourceDetail.createTime!=null ? resourceDetail.createTime.substring(0, 10): '' }}</b>
              <b class="filesize">{{ filesize(resourceDetail.size) }}</b>
              <span class="kws" v-if="resourceDetail.keywords != null">
                <em v-for="keyword in resourceDetail.keywords.split('::')">{{ keyword }}</em>
              </span>
            </div>

            <div class="desc">{{ resourceDetail.resourceDesc }}</div>

            <Star :model-value="resourceDetail.star" class="msg" readonly/>

            <div class="oper"> <!-- 下载操作-->
              <span>所需积分：<b>{{ resourceDetail.score }}</b></span>
              <span>下载次数：<b>{{ resourceDetail.downloadNum }}</b></span>
              <br/>
              <span>
<!--                <a class="btn"  @click="collectHandler(resourceDetail)">取消收藏</a>-->
                <a class="btn" v-if="!resourceDetail.collect" @click="collectHandler(resourceDetail)">收藏</a>
                <a class="btn downx" @click="downloadHandler(resourceDetail)">普通下载</a>
					      <a class="btn thunder">迅雷下载</a>
				      </span>
            </div>
          </div>

        </div>
        <div id="comment">
          <div class="title">
            评论：<span>共有<b>{{ total }}</b>条</span>
          </div>

          <NoContent :show="total == 0" text="暂无评论内容" />
          <!--每一条评论 -->
          <div class="cons" v-for="com in commentList" :key="com.id">
            <div class="img">
              <img :src="$api.preview(com.avatar)"/>
              <Star :model-value="com.star" class="star" readonly/>
            </div>
            <div class="cmt">
              <span>{{ com.nickName ?? com.tel }}</span>|<span>{{com.createTime}}</span>
              <p class="msg">
                <span>{{com.content}}</span>
              </p>
            </div>
          </div>

          <!-- 分页插件 -->
          <VanPagination v-model="page" :totalItems="total" @click-page="queryComments"
                         :itemsPerPage="rows" :showPageSize="5" :forceEllipses="true"/>
        </div>

        <!-- v-if="($store.getters.currentUser ?? {}).id !== resourceDetail.userId" -->
        <ResourceCommentFooter  v-bind:resId="id" @refresh-comment="queryComments"/>
      </section>
    </div>
  </article>
  <Footer/>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import UserAside from "../components/UserAside.vue";
import VanPagination from '../components/VanPagination.vue';
import Star from '../components/Star.vue';
import NoContent from "../components/NoContent.vue";
import ResourceCommentFooter from "../components/ResourceCommentFooter.vue";
import Advice from "../components/Advice.vue";
import ResourceNominate from "../components/ResourceNominate.vue";

export default {
  components: {
    Star,
    HeaderNav,
    Footer,
    UserAside,
    VanPagination,
    NoContent,
    ResourceCommentFooter,
    Advice,
    ResourceNominate,
  },
  props: {
    id: { // 资源ID
      type: [Number, String],
      required: true,
    }
  },
  data() {
    return {
      page: 1,
      total: 0,
      rows: 5, // 每页显示 5条
      resourceDetail: {
      }, // 资源详情
      commentList: [] , // 评论列表
      advice: {}, // 广告
    }
  },
  created() {
    this.queryResourceDetail();
    this.queryComments() ;
    this.queryAdvert();
  },
  methods: {
    filesize(value) {
      if (value > 1 << 30) {
        return (value / (1 << 30)).toFixed(1) + "GB";
      } else if (value > 1 << 20) {
        return (value / (1 << 20)).toFixed(1) + "MB";
      } else if (value > 1 << 10) {
        return (value / (1 << 10)).toFixed(1) + "KB";
      }
      return value + "B";
    },
    queryResourceDetail() {
      this.$api.queryResourceDetail(this.id).then(ret => {
        if (ret.status) {
          this.resourceDetail = ret.data;
        }
      });
    },
    queryComments() {
       this.$api.queryCommentList({page:this.page, rows:this.rows, resId:this.id}).then(ret=> {
          if (ret.status) {
             this.commentList = ret.data.records ;
             this.total = ret.data.total ;
          }
       })
    },
    attentionUser(userId) {
       this.$api.attentionUser(userId).then(ret=> {
          if (ret.status) {
            this.resourceDetail.attention = true ;
          }
       })
    },
    collectHandler(res) { // 收藏资源
       this.$api.collectResource(res.id).then(ret=> {
          if (ret.status) {
             this.$toastr.success(ret.message);
             res.collect = !res.collect ;
          }
       })
    },
    async downloadHandler(res) {
       let ret = await this.$api.checkDownloadCondition(res.id);
       if (ret.status) {
          // 获取返回的参数
          let params = ret.data ;
          if (params.r === 1) res.downloadNum++ ;
          // 继续第二步、准备下载
          window.location.href = this.$api.downloadResPath(res.url, params) ;
       }
    },
    queryAdvert() {
      this.$api.queryAdvertRank().then(ret=> {
         this.advice = ret.data ;
      })
    },
    sendLetter(userId) {
       this.$api.checkFriend(userId).then(ret=> {
          if (ret.status) {
            this.$router.push({name: "message" , query: {type: "letter", to: userId}})
          }
       })
    }
  },
  computed: {
     nickName() {
        if (this.resourceDetail.uploader != null) {
           return this.resourceDetail.uploader.nickName ?? this.telSecure(this.resourceDetail.uploader.tel) ;
        }
        return "" ;
     }
  }
}
</script>

<style scoped>

</style>